<template>
  <div class="login-form" v-loading.fullscreen="loading">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
      <el-form-item prop="acc">
        <el-input
          size="large"
          placeholder="请输入账号"
          v-model="ruleForm.acc"
          type="text"
          autocomplete="off"
        >
          <template #prefix>
            <el-icon class="el-input__icon">
              <User />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input
          size="large"
          placeholder="请输入密码"
          v-model="ruleForm.pwd"
          type="password"
          autocomplete="off"
        >
          <template #prefix>
            <el-icon class="el-input__icon">
              <lock />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <el-button
      size="large"
      type="primary"
      class="w-full"
      @click="submitForm(ruleFormRef)"
      >登录</el-button
    >
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import api from "@/api";
import router from "@/router";
import useStore from "@/stores";
const { user } = useStore();
const loading = ref(false);
const ruleFormRef = ref<FormInstance>();

const ruleForm = reactive({
  acc: "",
  pwd: "",
});

const rules = reactive<FormRules>({
  acc: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  //@ts-ignore
  formEl.validate((valid) => {
    if (valid) {
      loading.value = true;
      user
        .login(ruleForm.acc, ruleForm.pwd)
        .then((res) => {
          loading.value = false;
          router.push("/");
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
};

onMounted(() => {});
</script>

<style scoped lang="scss"></style>
